---
image: /generated/articles-docs-after-effects.png
id: after-effects
title: Import from After Effects
slug: after-effects
crumb: 'Integrations'
---

import {InlineStep} from '../components/InlineStep';

If you are a After Effects user, you might find it useful to convert your After Effects compositions to Remotion compositions. You can use the [`@remotion/lottie`](/docs/lottie) package for this.

:::note
Remotion compositions got their name because After Effects coined this term!
:::

### Install the Bodymovin plugin

- Make sure After Effects is closed.
- Go to [this site](https://aescripts.com/learn/zxp-installer/) and download the ZXP installer for your platform.
- Click [here](https://github.com/airbnb/lottie-web/blob/master/build/extension/bodymovin.zxp?raw=true) to download the latest Bodymovin plugin.
- Open the ZXP installer and drag the bodymovin file into it.

### Create a composition

Open After Effects and create a new project and then click `New composition`.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/new-composition.png" />

### Create your animation

Design your animation in After Effects. In this basic example, we used the rounded rectangle tool to draw a blue rounded square and then opened the transform menu and clicked the stopwatch icon to set keyframes for position and rotation to create a simple entrance effect.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/animation.png" />

### Allow export as JSON

In the After Effects menu, go to `Preferences -> Scripting & Expressions...`. Enable the first option: `Allow Scripts to Write Files and Access Network`. You only need to do this once.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/scripting.png" />

### Open the Bodymovin plugin

In the After Effects menu, go to `Window -> Extensions -> Bodymovin`.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/bodymovin.png" />

### Export the animation as JSON

First, select the composition <InlineStep>1</InlineStep>. Then press the export icon <InlineStep>2</InlineStep>. You will be prompted for a location to save the JSON file.
Click Render <InlineStep>3</InlineStep> to write the file.

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/bodymovin-tutorial.png" />

### Import the file into Remotion

Copy the file into the Remotion project. The recommended way is to put the JSON inside the `public/` folder of Remotion (create it if necessary) and then load it using [`staticFile()`](/docs/staticfile):

```tsx twoslash title="Animation.tsx"
import {Lottie, LottieAnimationData} from '@remotion/lottie';
import {useEffect, useState} from 'react';
import {cancelRender, continueRender, delayRender, staticFile} from 'remotion';

const Balloons = () => {
  const [handle] = useState(() => delayRender('Loading Lottie animation'));

  const [animationData, setAnimationData] = useState<LottieAnimationData | null>(null);

  useEffect(() => {
    fetch(staticFile('animation.json'))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
        console.log('Animation failed to load', err);
      });
  }, [handle]);

  if (!animationData) {
    return null;
  }

  return <Lottie animationData={animationData} />;
};
```

## Finetuning

It is advised to make your composition [the same size and duration](/docs/lottie/getlottiemetadata) as the original composition in After Effects. Congrats, you're playing an After Effects animation in Remotion! 🎉

<img src="https://pub-646d808d9cb240cea53bedc76dd3cd0c.r2.dev/result.gif" />

## See also

- [Using LottieFiles](/docs/lottie/lottiefiles)
- [`getLottieMetadata()`](/docs/lottie/getlottiemetadata)
